import React from 'react';
import '../../style.less';
import './his.less';
import {Spin } from 'antd';
import superagent from 'superagent';
import jsonp from 'superagent-jsonp';
import echarts from 'echarts';
import 'echarts/lib/component/tooltip';
import 'echarts/lib/component/title';
import 'echarts/theme/dark';
import Draggable from 'react-draggable';
import { browserHistory } from 'react-router'

function newline(option, number, axis){
    option[axis]['axisLabel']={
        interval: 0,
        formatter: function(params){
            var newParamsName = "";
            var paramsNameNumber = params.length;
            var provideNumber = number;
            var rowNumber = Math.ceil(paramsNameNumber / provideNumber);
            if (paramsNameNumber > provideNumber) {
                for (var p = 0; p < rowNumber; p++) {
                    var tempStr = "";
                    var start = p * provideNumber;
                    var end = start + provideNumber;
                    if (p == rowNumber - 1) {
                        tempStr = params.substring(start, paramsNameNumber);
                    } else {
                        tempStr = params.substring(start, end) + "\n";
                    }
                    newParamsName += tempStr;
                }
            } else {
                newParamsName = params;
            }
            return newParamsName
        }
    }
    return option;
}
function max(prev, next) {
    return Math.max(prev, next);
}

function min(prev, next) {
    return Math.min(prev, next);
}

let mapStyle = {height: 900,width: 460};
const position = [31.825, 118.926];


let titleStyle = {
    color: '#00e4ff',
    fontSize: 16
};

let allData;
let myChart,//降雨信息
    pumpChart,//泵站左
    //pumpRightChart,//泵站右
    floodPointChart,//积淹点
    floodPointRightChart,//大饼
    waterLevelChart,//长江水位流量
    pumpRightChart,
    alertCircleChart,//水库总数饼图
    floodAnaChart,//洪水相似度分析
    waterGateTopChart,//水闸上
    waterGateDownChart,//水闸下
    reservoirChart;//水库水位

let layerGroup;


//相似洪水
let d=new Date();
let nowMonth = d.getMonth() + 1;
nowMonth<10?nowMonth = "0"+nowMonth:1;
let nowDay = d.getFullYear() + "-" + nowMonth + "-" + d.getDate();

function getPreMonth(date) {
    let arr = date.split('-');
    let year = arr[0]; //获取当前日期的年份
    let month = arr[1]; //获取当前日期的月份
    let day = arr[2]; //获取当前日期的日
    let days = new Date(year, month, 0);
    days = days.getDate(); //获取当前日期中月的天数
    let year2 = year;
    let month2 = parseInt(month) - 1;
    if (month2 == 0) {
        year2 = parseInt(year2) - 1;
        month2 = 12;
    }
    let day2 = day;
    let days2 = new Date(year2, month2, 0);
    days2 = days2.getDate();
    if (day2 > days2) {
        day2 = days2;
    }
    if (month2 < 10) {
        month2 = '0' + month2;
    }
    let t2 = year2 + '-' + month2 + '-' + day2;
    return t2;
}
let preMonth = getPreMonth(nowDay);
let floodColor = ["#8ca100", "#ffaa05", "#059eff", "#424d73"];



function getData(obj,map) {
    let getAllPos = JSON.parse(localStorage.getItem('allPos4'))

    for(let pos in getAllPos){
        if(getAllPos[pos].left){
            document.getElementById(pos).style.left = getAllPos[pos].left+"px";
            document.getElementById(pos).style.top = getAllPos[pos].top+"px";
        }
    }
    let tm1,tm2
    if(obj.props.location.query.tm1 && obj.props.location.query.tm1){
        tm1 = obj.props.location.query.tm1
        tm2 = obj.props.location.query.tm2
    }else{
        browserHistory.push('/qhh');
    }
    superagent
        .get(window.httpAddress+'/njfx/getQinhuaiDataByTm!FLOOD')
        .query({tm1: tm1, tm2: tm2})
        .end(function (err,res) {
            allData = JSON.parse(res.text)

            if(layerGroup){
                layerGroup.clearLayers();
            }else{
                layerGroup = L.layerGroup({});
            }


            let marker1,marker2,marker3,marker4
            //显示警戒
            let warnPoint = allData.alert;
            //雨量
            for(let w1 in warnPoint.rain){
                marker1 = L.marker([warnPoint.rain[w1].latd,warnPoint.rain[w1].lgtd], {icon: icon1}).bindPopup(warnPoint.rain[w1].stnm+': '+warnPoint.rain[w1].value);
                layerGroup.addLayer(marker1).addTo(map);
            }
            //河道
            for(let w2 in warnPoint.river){
                marker2 = L.marker([warnPoint.river[w2].latd,warnPoint.river[w2].lgtd], {icon: icon2}).bindPopup(warnPoint.river[w2].stnm+': '+warnPoint.river[w2].value);
                layerGroup.addLayer(marker2).addTo(map);
            }

            //水库
            for(let w3 in warnPoint.rsvr.mRsvr){
                marker3 = L.marker([warnPoint.rsvr.mRsvr[w3].latd,warnPoint.rsvr.mRsvr[w3].lgtd], {icon: icon3}).bindPopup(warnPoint.rsvr.mRsvr[w3].stnm+': '+warnPoint.rsvr.mRsvr[w3].value);
                layerGroup.addLayer(marker3).addTo(map);
            }
            //积水
            for(let w4 in warnPoint.flood){
                marker4 = L.marker([warnPoint.flood[w4].latd,warnPoint.flood[w4].lgtd], {icon: icon4}).bindPopup(warnPoint.flood[w4].stnm+': '+warnPoint.flood[w4].value);
                layerGroup.addLayer(marker4).addTo(map);
            }



            obj.setState({loading:false,isoData: allData.img,channelData: allData.impRiver,emergency: allData.response,weather: allData.weather,njRain: allData.njRain})
            if(floodPointChart){

            }else{
                //降雨信息
                // myChart = echarts.init(document.getElementById('rain'), 'dark');
                //工情信息
                // pumpChart = echarts.init(document.getElementById('pump'), 'dark');
                pumpRightChart = echarts.init(document.getElementById('pumpRight'), 'dark');
                //积淹点
                floodPointChart = echarts.init(document.getElementById('floodPoint'), 'dark');
                //积淹点大饼
                floodPointRightChart = echarts.init(document.getElementById('floodPointRight'), 'dark');
                //长江水位流量
                waterLevelChart = echarts.init(document.getElementById('waterLevel'), 'dark');
                //水库水位
                reservoirChart = echarts.init(document.getElementById('reservoir'), 'dark');
                //水库总数饼图
                alertCircleChart = echarts.init(document.getElementById('alertCircle'), 'dark');
                waterGateTopChart = echarts.init(document.getElementById('waterGateTop'), 'dark');
                waterGateDownChart = echarts.init(document.getElementById('waterGateDown'), 'dark');


            }
            //降雨信息
            // let rainYData = [], rainXData = [], rainMostData = [], rainMarkPoint = [],nowDistRrain = allData.distRain.reverse()
            // for(let i in nowDistRrain){
            //     let rainArea = nowDistRrain[i].CITY.replace(/区/,"");
            //     rainYData.push(rainArea);
            //     rainXData.push(nowDistRrain[i].VALUE);
            //     rainMostData.push(nowDistRrain[i].maxValue);
            //     if(nowDistRrain[i].maxValue > 0){
            //         rainMarkPoint.push({name: nowDistRrain[i].VALUE,value: allData.distRain[i].maxSta.substring(0,2),coord:[allData.distRain[i].maxValue,Number(i)]})
            //     }
            // }
            // let myOption = {
            //     title: {
            //         text: '县市区降雨',
            //         left: 'center',
            //         textStyle: titleStyle
            //     },
            //     backgroundColor: "transparent",
            //     legend: {
            //         bottom: '0',
            //         data: ['3日面平均雨量', '最大降雨点']
            //     },
            //     tooltip: {
            //         trigger: 'item',
            //         formatter: '{a} <br/>{b} : {c}'
            //     },
            //     xAxis: {
            //         name:"(mm)",
            //         type: 'value',
            //         boundaryGap: ['0', '20%']
            //     },
            //     yAxis: {
            //         name: "县区(名称)",
            //         data: rainYData
            //     },
            //     series: [
            //         {
            //             name: '3日面平均雨量',
            //             type: 'bar',
            //             data: rainXData,
            //             label: {
            //                 normal: {
            //                     show: true,
            //                     position: 'right',
            //                 }
            //             },
            //             itemStyle:{
            //                 normal:{
            //                     color: "#99ffff"
            //                 }
            //             },
            //         },
            //         {
            //             name: '最大降雨点',
            //             type: 'bar',
            //             data: rainMostData,
            //             label: {
            //                 normal: {
            //                     show: true,
            //                     position: 'right'
            //                 }
            //             },
            //             itemStyle:{
            //                 normal:{
            //                     color: "#4d7dff"
            //                 }
            //             },
            //             markPoint : {
            //                 symbolRotate: 270,
            //                 symbolSize: 50,
            //                 symbolOffset: [24,0],
            //                 label:{
            //                     normal:{
            //                         show: true,
            //                         position: [16,10],
            //                         formatter: '{c}'
            //                     }
            //
            //                 },
            //                 data : rainMarkPoint
            //             },
            //         }
            //     ]
            // }
            // myChart.setOption(myOption);

            //工情信息
            let pumpData = allData.gq;
            // let pumpOption = {
            //     backgroundColor: '',
            //     title: {
            //         text: "实时流量 "+pumpData[0].aFlow+"m³/s",
            //         left: 'center',
            //         textStyle: titleStyle
            //     },
            //     tooltip : {
            //         formatter: "{a} <br/>{b} : {c}台"
            //     },
            //     series: [
            //         {
            //             radius: 90,
            //             endAngle: 0,
            //             startAngle: 180,
            //             center: ['50%', '90%'],
            //             min: 0,
            //             max: pumpData[0].allCnt,
            //             splitNumber: 3,
            //             name: '启用台数',
            //             type: 'gauge',
            //             axisLine: {            // 坐标轴线
            //                 lineStyle: {       // 属性lineStyle控制线条样式
            //                     color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
            //                     width: 3,
            //                     shadowColor : '#fff', //默认透明
            //                     shadowBlur: 10
            //                 }
            //             },
            //             axisLabel: {            // 坐标轴小标记
            //                 textStyle: {       // 属性lineStyle控制线条样式
            //                     fontWeight: 'bolder',
            //                     color: '#fff',
            //                     shadowColor : '#fff', //默认透明
            //                     shadowBlur: 10
            //                 }
            //             },
            //             axisTick: {            // 坐标轴小标记
            //                 length :15,        // 属性length控制线长
            //                 lineStyle: {       // 属性lineStyle控制线条样式
            //                     color: 'auto',
            //                     shadowColor : '#fff', //默认透明
            //                     shadowBlur: 10
            //                 }
            //             },
            //             detail : {
            //                 width: 20,
            //                 height: 20,
            //                 offsetCenter: ['0', '-28'],       // x, y，单位px
            //                 textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
            //                     color: '#fff',
            //                     fontSize: 18
            //                 }
            //             },
            //             data: [{value:pumpData[0].rtCnt}]
            //         }
            //     ]
            //
            // };
            //
            // pumpChart.setOption(pumpOption)

            // document.getElementById("pumpP").innerHTML = pumpData[0].hnnm;

            let pumpRightOption = {
                backgroundColor: '',
                title: {
                    text: "实时流量 "+pumpData[1].aFlow+"m³/s",
                    left: 'center',
                    textStyle: titleStyle
                },
                tooltip : {
                    formatter: "{a} <br/>{b} : {c}台"
                },
                series: [
                    {
                        radius: 90,
                        endAngle: 0,
                        startAngle: 180,
                        center: ['50%', '90%'],
                        min: 0,
                        max: pumpData[1].allCnt,
                        splitNumber: 2,
                        name: '启用台数',
                        type: 'gauge',
                        axisLine: {            // 坐标轴线
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: [[0.09, 'lime'],[0.82, '#1e90ff'],[1, '#ff4500']],
                                width: 3,
                                shadowColor : '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisLabel: {            // 坐标轴小标记
                            textStyle: {       // 属性lineStyle控制线条样式
                                fontWeight: 'bolder',
                                color: '#fff',
                                shadowColor : '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        axisTick: {            // 坐标轴小标记
                            length :15,        // 属性length控制线长
                            lineStyle: {       // 属性lineStyle控制线条样式
                                color: 'auto',
                                shadowColor : '#fff', //默认透明
                                shadowBlur: 10
                            }
                        },
                        detail : {
                            width: 20,
                            height: 20,
                            offsetCenter: ['0', '-28'],       // x, y，单位px
                            textStyle: {       // 其余属性默认使用全局文本样式，详见TEXTSTYLE
                                color: '#fff',
                                fontSize: 18
                            }
                        },
                        data: [{value:pumpData[1].rtCnt}]
                    }
                ]

            };


            pumpRightChart.setOption(pumpRightOption)
            document.getElementById("pumpRightp").innerHTML = pumpData[1].hnnm;


            //积淹点信息
            let floodPointData = allData.flood.rtFlood.slice(0,5),xFloodPointData = [],yFloodPointData = [];
            for(let x in floodPointData){
                xFloodPointData.push(floodPointData[x].STNM.substring(0,12))
                yFloodPointData.push(floodPointData[x].VALUE)
            }
            let floodPointOption = {

                backgroundColor: "transparent",
                color: ['#3398DB'],
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                xAxis: {
                    data: xFloodPointData,
                    axisLabel:{
                        color: "#000"
                    }
                },
                yAxis: {
                    name:"cm",
                    type: 'value'
                },
                series: [
                    {
                        name: '面平均雨量',
                        type: 'bar',
                        data: yFloodPointData,
                        label: {
                            normal: {
                                show: true,
                                position: 'top'
                            }
                        },
                    }
                ]
            }
            floodPointOption = newline(floodPointOption, 3, 'xAxis')
            console.log(floodPointOption)


            //积淹点大饼
            let floodPointRightData = allData.flood.summary, floodPointRightDataArray = [],
                floodPointRightDataTitle = ['0-20', '20-30', '30-40', '40-50','>50' ];
            for (let y in floodPointRightData) {
                floodPointRightDataArray.push({value: floodPointRightData[y], name: floodPointRightDataTitle[y]})
            }
            let floodPointRightOption = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: "{a} <br/>{b} : {c} ({d}%)"
                },
                legend: {
                    orient: 'vertical',
                    left: 'right',
                    data: floodPointRightDataTitle
                },
                series: [
                    {
                        name: '积淹点',
                        type: 'pie',
                        radius: '50%',
                        center: ['45%', '60%'],
                        itemStyle: {
                            normal: {
                                color: function (val) {
                                    let name = val.name;
                                    if(name == '>50'){
                                        return "#ff3333";
                                    }else if(name == '40-50'){
                                        return "#ffcc00"
                                    }else if(name == '30-40'){
                                        return "#00c000"
                                    }else if(name == '20-30'){
                                        return "#007f80"
                                    }else{
                                        return "#99ffff";
                                    }


                                }
                            }
                        },
                        data: floodPointRightDataArray
                    }
                ]
            };

            floodPointRightChart.setOption(floodPointRightOption);

            //长江水位流量
            let datong = allData.datong,xaiguan = allData.xiaguan,ifMore,ifTall;
            Number(datong.compHisQ)>0?ifMore="多":ifMore="少";
            Number(xaiguan.compHis)>0?ifTall="高":ifTall="低";
            document.getElementById("waterLevelTop").innerHTML = `大通: 最高水位 <span>${datong.Z}m</span> 最高流量<span>${datong.Q/10000}万m³/s</span> 较常年同期偏<span>${ifMore}${Math.abs(Number(datong.compHisQ))}%</span>`;
            document.getElementById("waterLevelBottom").innerHTML = `下关: 最高潮位 <span>${xaiguan.Z}m</span> 较常年同期偏<span>${ifTall}${Math.abs(Number(xaiguan.compHis))}m</span>`

            let datong1 = [],datong2 = [], xiaguanData1 = [],waterTl = [];
            for(let z in allData.datong.process){
                waterTl.push(allData.datong.process[z].TM);
                datong1.push(allData.datong.process[z].Z);
                datong2.push(allData.datong.process[z].Q/10000);
                xiaguanData1.push(allData.xiaguan.process[z].Z);
            }


            let waterLevelOption = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                legend: {
                    bottom: '0',
                    data:['下关潮位']
                },
                yAxis: [
                    {
                        type: 'value',
                        name: 'm',
                        min: (datong1.concat(xiaguanData1).reduce(min)*.9).toFixed(1),
                    }
                ],
                xAxis: {
                    data: waterTl
                },
                series: [

                    {
                        name: "下关潮位",
                        type: "line",
                        data: xiaguanData1,
                        itemStyle: {
                            normal: {
                                color: '#00c000'
                            }
                        }
                    }
                ]
            }

            waterLevelChart.setOption(waterLevelOption);


            //水库水位

            let reservoirData = allData.impRsvr,reservoirDatax = [], reservoirDatay = [], reservoirWarn = [];
            for(let xx in reservoirData){
                reservoirDatax.push(reservoirData[xx].STNM);
                reservoirDatay.push(reservoirData[xx].VALUE);
                reservoirWarn.push(reservoirData[xx].WRZ);
            }
            let reservoirOption = {
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{b} : {c}m<br />'
                },
                xAxis: {
                    name: "水库",
                    data: reservoirDatax,

                },
                yAxis: {
                    name:"m",
                },
                series: [
                    {
                        name: "水库水位",
                        type:'bar',
                        label:{
                            normal:{
                                show:true,
                                position:'top'
                            }
                        },
                        itemStyle:{
                            normal:{
                                color: function (val) {
                                    if(val.value >= reservoirWarn[val.dataIndex]){
                                        return "#fc9c13"
                                    }else{
                                        return "#17a6ca"
                                    }
                                }
                            }
                        },
                        data: reservoirDatay
                    }
                ]
            }

            let newReservoirOption = newline(reservoirOption, 2, 'xAxis')

            reservoirChart.setOption(newReservoirOption);

            //水库总数饼图
            let alertCircleData = allData.alert.rsvr, alertCircleArr = [];
            alertCircleArr.push({
                name:"超汛限水库",
                value: alertCircleData.alertNum
            })
            alertCircleArr.push({
                name:"正常水库",
                value: alertCircleData.total - alertCircleData.alertNum
            })
            let alertCircleOption = {
                backgroundColor: "transparent",

                series:[
                    {
                        name: '水库情况',
                        type: 'pie',
                        radius : '30%',
                        center: ['50%', '60%'],
                        label: {
                            normal: {
                                show: true,
                                position: 'right',
                                formatter: '{b}{c}座'
                            }
                        },
                        data: alertCircleArr

                    }
                ]
            };


            alertCircleChart.setOption(alertCircleOption)


            //水闸信息
            let waterGateTopData = allData.qhxhGate, waterGateTopx = [],waterGateTopy = [],waterGateTopt = [],finalWaterGateTopData = []
            for(let i in waterGateTopData){
                waterGateTopx.push(waterGateTopData[i].TM.replace(/ /,""));
                waterGateTopy.push(waterGateTopData[i].CNT);
                if(waterGateTopData[i].HEIGHT == 99){
                    waterGateTopt.push("出水");
                }else{
                    waterGateTopt.push(waterGateTopData[i].HEIGHT);
                }
            }
            let showHeightTop = []
            for(let dd in waterGateTopt){
                showHeightTop.push([Number(dd),12,waterGateTopt[dd]])
            }

            for(let y in waterGateTopy){
                if(waterGateTopy[y] == 0){
                    finalWaterGateTopData.push([Number(y),0,waterGateTopt[y]])
                }else if(waterGateTopy[y] == 12){
                    for(let bb = 0;bb<12;bb++){
                        finalWaterGateTopData.push([Number(y),bb,waterGateTopt[y]])
                    }
                }else{
                    let allGates = [1,2,3,4,5,6,7,8,9,10,11,12];
                    let aa = allGates.splice(2-(Math.round(waterGateTopy[y]/2)-1),Math.floor(waterGateTopy[y]));
                    for(let cc in aa){
                        finalWaterGateTopData.push([Number(y),aa[cc],waterGateTopt[y]])
                    }
                }
            }
            let waterGateTopOption = {
                title: {
                    text: '秦淮新河闸'
                },
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                xAxis: {
                    boundaryGap: false,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#999',
                            type: 'dashed'
                        }
                    },
                    data: waterGateTopx
                },
                yAxis: {
                    type: 'category',
                    offset: 16,
                    axisLine: {
                        show: false
                    },
                    data: [1,2,3,4,5,6,7,8,9,10,11,12]
                },
                series:[
                    {
                        step: 'start',
                        type: 'scatter',
                        symbol: 'image:///images/gate.png',
                        symbolSize: function (val) {
                            if(val[2] > 0){
                                return 24
                            }else{
                                return 0
                            }
                        },
                        itemStyle:{
                            normal:{
                                color: "#2eb785"
                            }
                        },
                        data: finalWaterGateTopData
                    },
                    {
                        type: 'scatter',
                        name: '水位',
                        symbolSize: .1,
                        label: {
                            normal: {
                                formatter: function(val){
                                    return val.value[2]+"米";
                                },
                                position: 'bottom',
                                show: true,
                                fontSize: 18,
                                backgroundColor: "#0a0f23",
                                color: "#0a0f23"
                            }
                        },
                        data: showHeightTop
                    }
                ],
            }

            waterGateTopChart.setOption(waterGateTopOption);


            let waterGateDownData = allData.wdmGate, waterGateDownx = [],waterGateDowny = [],waterGateDownt = [],finalWaterGateDownData = []
            for(let i in waterGateDownData){
                waterGateDownx.push(waterGateDownData[i].TM.replace(/ /,""));
                waterGateDowny.push(waterGateDownData[i].CNT);
                if(waterGateDownData[i].HEIGHT == 99){
                    waterGateDownt.push("出水");
                }else{
                    waterGateDownt.push(waterGateDownData[i].HEIGHT);
                }
            }
            let showHeight = []
            for(let dd in waterGateDownt){
                showHeight.push([Number(dd),6,waterGateDownt[dd]])
            }

            for(let y in waterGateDowny){
                if(waterGateDowny[y] == 0){
                    finalWaterGateDownData.push([Number(y),0,waterGateDownt[y]])
                }else if(waterGateDowny[y] == 6){
                    for(let bb = 0;bb<6;bb++){
                        finalWaterGateDownData.push([Number(y),bb,waterGateDownt[y]])
                    }
                }else{
                    let allGates = [1,2,3,4,5,6];
                    let aa = allGates.splice(2-(Math.round(waterGateDowny[y]/2)-1),Math.floor(waterGateDowny[y]));
                    for(let cc in aa){
                        finalWaterGateDownData.push([Number(y),aa[cc],waterGateDownt[y]])
                    }
                }
            }
            let waterGateDownOption = {
                title: {
                    text: '武定门闸'
                },
                backgroundColor: "transparent",
                tooltip: {
                    trigger: 'item',
                    formatter: '{a} <br/>{b} : {c}'
                },
                xAxis: {
                    boundaryGap: false,
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: '#999',
                            type: 'dashed'
                        }
                    },
                    data: waterGateDownx
                },
                yAxis: {
                    type: 'category',
                    offset: 16,
                    axisLine: {
                        show: false
                    },
                    data: [1,2,3,4,5,6]
                },
                series:[
                    {
                        step: 'start',
                        type: 'scatter',
                        symbol: 'image:///images/gate.png',
                        symbolSize: function (val) {
                            if(val[2] > 0){
                                return 24
                            }else{
                                return 0
                            }
                        },
                        itemStyle:{
                            normal:{
                                color: "#2eb785"
                            }
                        },
                        data: finalWaterGateDownData
                    },
                    {
                        type: 'scatter',
                        name: '水位',
                        symbolSize: .1,
                        label: {
                            normal: {
                                formatter: function(val){
                                    return val.value[2]+"米";
                                },
                                position: 'bottom',
                                show: true,
                                fontSize: 18,
                                backgroundColor: "#0a0f23",
                                color: "#0a0f23"
                            }
                        },
                        data: showHeight
                    }
                ],
            }

            waterGateDownOption = newline(waterGateDownOption, 5, 'xAxis')
            waterGateDownChart.setOption(waterGateDownOption);



        })





}

//等值面
class Isosurface extends React.Component{
    constructor(props){
        super(props)
    }

    componentWillReceiveProps(nextProps){

    }
    render(){
        let imgUrl, imgLel = this.props.info.lelve,levelGroup = [];
        if(this.props.info.success){
            this.props.info.bg?imgUrl = this.props.info.imgurl.replace(/http:\/\/10.32.224.49/,window.httpAddress):true;
        }else{
            imgUrl = window.httpAddress+":8181/isocreator/blnlib/njfx2.png";
        }
        for(let i in imgLel){
            levelGroup.push(
                <div className="lvlItem" key={i}>
                    <span style={{background: imgLel[i].color}}></span>
                    {imgLel[i].value}
                </div>
            )
        }
        return(
            <div className="isosurface">
                <img src={imgUrl} alt="" />
                <div className="lvlWrap">
                    {levelGroup}
                </div>
            </div>
        )
    }

}



//河道水位
class WaterChannel extends React.Component{
    constructor(props){
        super(props);
    }
    componentWillReceiveProps(nextProps){

    }
    render(){
        let waterInfo = [];
        for(let i in this.props.info){
            if(i < 5){
                waterInfo.push(
                    <tr key={i}>
                        <td className="waterInfo1">{this.props.info[i].STNM}</td>
                        <td>{this.props.info[i].Z}</td>
                        <td>{this.props.info[i].WRZ}</td>
                        <td>{this.props.info[i].HISHIGHEST}</td>
                        <td>{this.props.info[i].hisOrder}</td>
                    </tr>
                )
            }

        }
        return(
            <div className="waterChannel">
                {waterInfo?(
                    <table>
                        <thead>
                        <tr>
                            <th>站点名称</th>
                            <th>实时水位(m)</th>
                            <th>警戒水位(m)</th>
                            <th>历史最高水位(m)</th>
                            <th>历史同期排名</th>
                        </tr>
                        </thead>
                        <tbody>
                        {waterInfo}
                        </tbody>
                    </table>
                ):(
                    <div></div>
                )}

            </div>
        )
    }
}




//降雨信息上
class RainTop extends React.Component{
    constructor(props) {
        super(props);
    }
    componentWillReceiveProps(nextProps){

    }
    render(){
        let rainTopData = this.props.info
        return(
            <div className="rainTop">

                {rainTopData?(
                    <div className="weatherSummary">
                        3天总降雨量 {rainTopData.TTVALUE} mm
                    </div>
                ):(
                    <div></div>
                )}
            </div>


        )
    }
}





let allPos4 = {
    totalWrap: {},
    mainWrap: {},
    mapArea: {},
    waterLevelWrap: {},
    waterChannelWrap:{},
    pumpWrap:{},
    emergencyWrap: {},
    dangerWrap:{},
    reservoirWrap: {},
    waterGate: {}
};
let map;

let icon1 = L.icon({
    iconUrl: 'images/legend/1.gif',
    iconSize:     [20, 20],
});
let icon2 = L.icon({
    iconUrl: 'images/legend/2.gif',
    iconSize:     [20, 20],
});
let icon3 = L.icon({
    iconUrl: 'images/legend/3.gif',
    iconSize:     [20, 20],
});
let icon4 = L.icon({
    iconUrl: 'images/legend/4.gif',
    iconSize:     [20, 20],
});

// localStorage.removeItem('allPos4')
if(localStorage.getItem('allPos4')){

}else{
    localStorage.setItem('allPos4',JSON.stringify(allPos4))
}




class His extends React.Component {
    constructor(props) {
        super(props);
        this.state ={
            loading: true,
            isoData:{},
            channelData:{},
            allPos: allPos4
        };

    }

    componentDidMount = () => {
        try{
            this.setState({
                allPos: JSON.parse(localStorage.getItem('allPos4'))
            })
        }catch(err){

        }

        map = L.map('map', { zoomControl:false }).setView(position, 10);
        let self = this
        getData(self,map);
        map.dragging.disable();
        map.touchZoom.disable();

        map.doubleClickZoom.disable();

        map.scrollWheelZoom.disable();

        // L.marker([31.72663, 119.05920], {icon: icon1}).addTo(map);

        L.esri.tiledMapLayer({
            url: 'http://10.32.224.54:6080/arcgis/rest/services/%E5%8D%97%E4%BA%AC%E6%B0%B4%E5%8A%A1%E5%B1%80%E7%94%B5%E5%AD%90%E5%9C%B0%E5%9B%BE/%E7%A7%A6%E6%B7%AE%E6%B2%B3%E6%B5%81%E5%9F%9F%E9%AB%98%E4%BA%AE%E5%9C%B0%E5%9B%BE/MapServer',
            // url: 'http://122.227.159.86:6080/arcgis/rest/services/%E5%8D%97%E4%BA%AC%E9%98%B2%E6%B1%9B/%E7%A7%A6%E6%B7%AE%E6%B2%B3%E6%B5%81%E5%9F%9F%E9%AB%98%E4%BA%AE%E5%9C%B0%E5%9B%BE102100/MapServer',
            maxZoom: 15,
            minZoom: 7,
            attribution: '&copy; 2017 弘泰水利'
        }).addTo(map);




        // L.marker([ 32.04, 118.78 ]).addTo(map).bindPopup(
        // '宁波').openPopup();

        // let nbMarker = L.circleMarker([32.04, 118.78], {
        //     radius: 4,
        //     fillColor: 'red',
        //     fillOpacity: 1,
        //     stroke: true,
        //     color: 'black',
        //     weight: 2
        // }).addTo(map);


    }


    handleStop = (e,data)=> {
        let target = document.getElementById(data.node.id);
        let changePos = JSON.parse(localStorage.getItem('allPos4'))
        for(let ii in changePos){
            if(ii == data.node.id){
                changePos[ii] = {}
                changePos[ii].left = target.offsetLeft + data.x;
                changePos[ii].top = target.offsetTop + data.y;
            }
        }
        localStorage.setItem('allPos4',JSON.stringify(changePos));

    }

    render() {

        return(
            <Spin spinning={this.state.loading} tip="加载中...">
                <div className="mainWrap qhh hisWrap">
                    <div className="pageTitle">
                        南京市秦淮河大数据洪水分析平台({this.props.location.query.tm1.replace(/-/g,'/')}时-{this.props.location.query.tm2.replace(/-/g,'/')}时)
                    </div>
                    <div className="pageHome qhh his">
                        <Draggable onStop={this.handleStop}>
                            <div className="mapArea" id="mapArea">
                                <div className="mapLegend">
                                    <div className="mapLegendItem">
                                        <img src="images/legend/1.png" alt=""/>
                                        雨强(1小时雨量大于16.7mm)
                                    </div>
                                    <div className="mapLegendItem">
                                        <img src="images/legend/2.png" alt=""/>
                                        河道水位超警戒
                                    </div>
                                    <div className="mapLegendItem">
                                        <img src="images/legend/3.png" alt=""/>
                                        中型水库水位超汛限
                                    </div>
                                    <div className="mapLegendItem">
                                        <img src="images/legend/4.png" alt=""/>
                                        积水大于20cm
                                    </div>
                                </div>
                                <div id="map" style={mapStyle}></div>
                                <div id="alertCircle">

                                </div>
                            </div>
                        </Draggable>

                        {/*降雨信息*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="rain graphic hisRain" id="mainWrap">
                                <div className="selfTitle">
                                    降雨信息
                                </div>
                                <RainTop info={this.state.njRain} />
                                <div className="clearfix textCenter">
                                    {/*<div id="rain" className="fl"></div>*/}
                                    <Isosurface info={this.state.isoData} />
                                </div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*长江水位流量*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic waterLever" id="waterLevelWrap">
                                <div className="selfTitle">
                                    长江水位流量
                                </div>
                                <p id="waterLevelTop"></p>
                                <p id="waterLevelBottom"></p>
                                <div id="waterLevel"></div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*河道水位*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic waterChannel" id="waterChannelWrap">
                                <div className="selfTitle">
                                    河道水位
                                </div>
                                <WaterChannel info={this.state.channelData} />
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        {/*泵站工情*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="pump graphic" id="pumpWrap">
                                <div className="selfTitle">
                                    工情信息
                                </div>
                                <div className="subTitle">
                                    泵站信息
                                </div>
                                <div className="clearfix">
                                    {/*<div className="fl">*/}
                                    {/*<p id="pumpP"></p>*/}
                                    {/*</div>                                       */}
                                    <div id="pump" className="hide"></div>
                                    <p id="pumpP" className="hide"></p>
                                    <div className="pumpRightWrap">
                                        <div id="pumpRight"></div>
                                        <p id="pumpRightp"></p>
                                    </div>
                                </div>
                                <div className="floodPointWrap">
                                    <div className="subTitle">
                                        积淹点信息
                                    </div>
                                    <div className="clearfix qhhRightTopPos">
                                        <div id="floodPoint" className="fl"></div>
                                        <div className="fr" id="floodPointRight"></div>
                                    </div>

                                </div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic reservoir" id="reservoirWrap">
                                <div className="selfTitle">
                                    水库水位
                                </div>
                                <div className="reservoirLegend">
                                    <div className="lvlItem">
                                        <span style={{background: "#fc9c13"}}></span>
                                        水库超汛限水位
                                    </div>
                                    <div className="lvlItem">
                                        <span style={{background: "#17a6ca"}}></span>
                                        水库未超汛限水位
                                    </div>
                                </div>
                                <div id="reservoir"></div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic waterGate" id="waterGate">
                                <div className="selfTitle">
                                    水闸信息
                                </div>
                                <div className="waterGateTop">
                                    <div id="waterGateTop"></div>
                                </div>
                                <div className="waterGateDown">
                                    <div id="waterGateDown"></div>
                                </div>
                                <div className="graphicRight"></div><div className="graphicLeft"></div>
                            </div>
                        </Draggable>

                        {/*险情信息*/}
                        <Draggable onStop={this.handleStop}>
                            <div className="graphic danger dangerRightBottomHis hide" id="dangerWrap">
                                <div className="selfTitle">险情信息</div>

                                <div className="graphicRight"></div>
                                <div className="graphicLeft"></div>
                            </div>
                        </Draggable>

                    </div>
                </div>
            </Spin>
        )
    }
}

export default His;
